<template>
	<view>
		<u-navbar title="购物车" right-text="编辑" placeholder />

		<view class="list">
			<view class="item">
				<image src="https://mall.s.maizuo.com/6c4c9ecfd804ae4cc7f397cb16f332d6.png" mode=""></image>
				<view class="box">
					<view class="name">
						海天下 凤尾虾 200g*3
					</view>
					<view class="price">
						<text>￥109.00</text>
						<text>x3</text>
					</view>
				</view>
			</view>

			<view class="item">
				<image src="https://mall.s.maizuo.com/6c4c9ecfd804ae4cc7f397cb16f332d6.png" mode=""></image>
				<view class="box">
					<view class="name">
						海天下 凤尾虾 200g*3
					</view>
					<view class="price">
						<text>￥109.00</text>
						<view class="step">
							<text class="btn">-</text>
							<text>5</text>
							<text class="btn">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="count">
			<view class="">
				合计: &yen; <text style="color:#c03131;margin-left:3px;">88.88</text>
			</view>
			 <u-button text="结算" color="linear-gradient(to right, #ff6034,#ee0a24)"></u-button>
		</view>
	</view>
</template>

<style>
	page {
		background-color: #f4f4f4;
	}

	.list {
		margin-top: 5px;
		background-color: #fff;
	}

	.list .item {
		height: 128px;
		display: flex;
		align-items: center;
		padding-left: 15px;
		padding-right: 15px;
		border-bottom: 1px solid #dadada;
	}

	.list image {
		width: 95px;
		height: 95px;
		background-color: #f4f4f4;
	}

	.list .box {
		margin-left: 10px;
		height: 95px;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.list .price {
		display: flex;
		justify-content: space-between;
		padding-right: 15px;
	}

	.list .step {
		display: flex;
	}
	.list .step text {
		margin: 5px;
	}
	.list .step .btn {
		background-color: #dadada;
		width: 20px;
		display: flex;
		justify-content: center;
	}
	
	.count {
		display: flex;
		height: 50px;
		background-color: #fff;
		position: fixed;
		bottom: 50px;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		padding-left: 15px;
		box-sizing: border-box;
		padding-right: 15px;
	}
	.count uni-button {
		width: 80px;
		margin: 0;
		border-radius: 50px;
	}
</style>